import React from "react";
import "./time.css";
import { useWatchTime } from "../../hooks/useWatchTime.hook";

const TimeWatch: React.FC = () => {
    const { isMaxMinutesReached, startTimer, formatTime, elapsedTime } = useWatchTime(1);
    return (
        <div className="time-watch-container">
            {isMaxMinutesReached ? (
                <div className="time-reached">
                    <div className="time-reached-message">1分钟已到</div>
                    <button className="reset-button" onClick={startTimer} >
                        重新开始计时
                    </button>
                </div>
            ) : (
               <>
                <div className="time-display">
                    页面停留时间: <strong>{formatTime(elapsedTime)}</strong>
               
                </div>
                <div className="time-display">
                    <button className="reset-button" onClick={startTimer} >
                        开始计时
                    </button>
                </div>
               </>
            )}
        </div>
    );
};

export default TimeWatch;